<template>
  <div class="member-body">
    <div class="user-info">
      <div class="is-login">
      <span class="check">
        <a href="#" class="s-fc7">本月已下载的付费歌曲</a>
        <i class="u-gt down"> > </i>
        <a href="#" class="s-fc7">我购买的单曲</a>
         <i class="u-gt"> > </i>
      </span>
        <div class="user-head">
          <div class="avatar">
            <img
                v-lazy="userinfo.avatarUrl"
                alt="" class="avatar-img ">
          </div>
          <div class="user-content">
            <h2 class="s-fc000">{{userinfo.nickname}}</h2>
            <img
                src="../../assets/vip1-3.png"
                alt="" class="brand-tag">
            <div class="not-dredge">当前未开通</div>
            <span class="btn-gray btn-send">买会员赠好友</span>
            <span class="btn-gray">使用兑换码</span>
          </div>
        </div>
      </div>
    </div>
    <div class="scene-card">
      <section class="m-vipcashier-header"></section>
      <section class="m-vipcashier-tab">
        <ul class="m-vipcashier-tab-list">
          <li class="redvip active">
            <span>黑胶VIP</span>
            <img
                src="../../assets/vip1-1.png"
                alt="" class="list-icon">
          </li>
          <li class="ordinary">
            <span>音乐包</span>
            <img
                src="../../assets/vip1-2.png"
                class="list-icon" alt="">
          </li>
        </ul>
      </section>
      <section class="m-vipcashier-product">
        <div class="tabb">
          <div class="m-vipcashier-product-multicolumn">
            <ul class="m-vipcashier-product-list">
              <li class="product-item" :class="{'active':isActive==1}" @click="isActive=1;money=0.88;less=12.12">
                <div class="product-item-corner">推荐</div>
                <div class="product-item-month">连续包月</div>
                <div class="product-item-origin">
                  <span class="product-item-origin-label">￥</span>
                  <span class="product-item-origin-finalprice">0.88</span>
                </div>
                <div class="product-item-desc">
                  <div class="product-item-origin-price">
                    ￥13
                  </div>
                </div>
                <div class="product-item-bottom">新客首月0.7折</div>
              </li>
              <li class="product-item" :class="{'active':isActive==2}" @click="isActive=2;money=88;less=50">
                <div class="product-item-corner">免费送快看月卡</div>
                <div class="product-item-month">连续包年</div>
                <div class="product-item-origin">
                  <span class="product-item-origin-label">￥</span>
                  <span class="product-item-origin-finalprice">88</span>
                </div>
                <div class="product-item-desc">
                  <div class="product-item-origin-price">
                    ￥
                    138
                  </div>
                </div>
                <div class="product-item-bottom">新客首年6.4折</div>
              </li>
              <li class="product-item " :class="{'active':isActive==3}" @click="isActive=3;money=18;less=21">
                <div class="product-item-month">连续包季</div>
                <div class="product-item-origin">
                  <span class="product-item-origin-label">￥</span>
                  <span class="product-item-origin-finalprice">18</span>
                </div>
                <div class="product-item-desc">
                  <div class="product-item-origin-price">
                    折合￥6/月
                  </div>
                </div>
                <div class="product-item-bottom">新客首季4.7折</div>
              </li>
              <li class="product-item" :class="{'active':isActive==4}" @click="isActive=4;money=158;less=58">
                <div class="product-item-month">12个月</div>
                <div class="product-item-origin">
                  <span class="product-item-origin-label">￥</span>
                  <span class="product-item-origin-finalprice">158</span>
                </div>
                <div class="product-item-desc">
                  <div class="product-item-origin-price">
                    ￥216
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="m-vipcashier-product-multicolumn">
            <ul class="m-vipcashier-product-list">
              <li class="product-item" :class="{'active':isActive==5}" @click="isActive=5;money=88;less=28">
                <div class="product-item-month">6个月</div>
                <div class="product-item-origin">
                  <span class="product-item-origin-label">￥</span>
                  <span class="product-item-origin-finalprice">88</span>
                </div>
                <div class="product-item-desc">
                  <div class="product-item-origin-price">
                    ￥108
                  </div>
                </div>
              </li>
              <li class="product-item" :class="{'active':isActive==6}" @click="isActive=6;money=45;less=9">
                <div class="product-item-month">3个月</div>
                <div class="product-item-origin">
                  <span class="product-item-origin-label">￥</span>
                  <span class="product-item-origin-finalprice">45</span>
                </div>
                <div class="product-item-desc">
                  <div class="product-item-origin-price">
                    ￥
                    54
                  </div>
                </div>
              </li>
              <li class="product-item" :class="{'active':isActive==7}" @click="isActive=7;money=16;less=2">
                <div class="product-item-month">1个月</div>
                <div class="product-item-origin">
                  <span class="product-item-origin-label">￥</span>
                  <span class="product-item-origin-finalprice">16</span>
                </div>
                <div class="product-item-desc">
                  <div class="product-item-origin-price">
                    ￥18
                  </div>
                </div>
                <div class="product-item-bottom">新客首季4.7折</div>
              </li>
              <li class="product-item none">
              </li>
            </ul>
          </div>
        </div>
        <div class="m-vipcashier-product-desc">
          <span>到期自动续费13元，可取消；优惠仅限1次</span>
          <a href="#" class="qicon">
            <img src="https://p1.music.126.net/z0WB4iUv2q8olCT3gNvhtg==/109951163089451985.jpg" alt="">
          </a>
        </div>
      </section>
      <section class="m-vipcashier-coupon">
        <div class="m-vipcashier-coupon-form">
          <div class="coupon-form-select">
            <div class="rc-select-selection">
              <div class="rc-select-selection__rendered">
                <div class="rc-select-selection__placeholder">
                  该活动价不支持使用优惠券
                </div>
                <div class="rc-select-search">
                  <div class="rc-select-search__field__wrap">
                    <input type="text" class="rc-select-search__field">
                    <span class="rc-select-search__field__mirror"></span>
                  </div>
                </div>
              </div>
              <div class="rc-select-arrow">
                <i class="rc-select-arrow-icon"></i>
              </div>
            </div>
          </div>
          <div class="coupon-form-exchange-link">
            兑换优惠券
          </div>
        </div>
      </section>
      <section class="m-m-vipcashier-settle-warpper">
        <section class=" m-vipcashier-settle">
          <div class="m-vipcashier-settle-line"></div>
          <div class="m-vipcashier-settle-body">
            <div class="u-settle-qrcode">
              <img
                  src=""
                  alt="">

            </div>
            <div class="u-settle-detail">
              <div class="detail-title">使用支付宝、微信扫码支付</div>
              <div class="detail-icons">
                <img
                    src="https://p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4063164427/d17b/fb9e/568d/70cddd565a4fa30d1891745626723b9e.png"
                    alt="">
                <img
                    src=""
                    alt="">
              </div>
              <div class="detail-body">
                <span class="detail-origin-price">{{money}}</span>元
                <span class="detail-cost-price">
                (已省 <span class="detail-cost-price-count">{{less}}元</span>)
              </span>
              </div>
            </div>
          </div>
        </section>
      </section>
    </div>
    <section class="m-privilege">
      <h2 class="title">
        <em>黑胶VIP特权</em>
      </h2>
      <ul class="m-rights">
        <li>
          <img src="../../assets/icn1.png" alt="">
          <p class="icon-name">会员曲库</p>
        </li>
        <li>
          <img src="../../assets/icn2.png" alt="">
          <p class="icon-name">免费下载</p>
        </li>
        <li>
          <img src="../../assets/icn3.png" alt="">
          <p class="icon-name">铃声</p>
        </li>
        <li>
          <img src="../../assets/icn4.png" alt="">
          <p class="icon-name">历史日推</p>
        </li>
        <li>
          <img src="../../assets/icn5.png" alt="">
          <p class="icon-name">歌词图片</p>
        </li>
        <li>
          <img src="../../assets/icn6.png" alt="">
          <p class="icon-name">无损音质</p>
        </li>
        <li>
          <img src="../../assets/icn7.png" alt="">
          <p class="icon-name">广告特权</p>
        </li>
        <li>
          <img src="../../assets/icn8.png" alt="">
          <p class="icon-name">鲸云音效</p>
        </li>
        <li>
          <img src="../../assets/icn9.png" alt="">
          <p class="icon-name">头像挂件</p>
        </li>
        <li>
          <img src="../../assets/icn10.png" alt="">
          <p class="icon-name">个性皮肤</p>
        </li>
      </ul>
    </section>
    <div class="n-special">
      <h2 class="title">
        <em>VIP专享下载曲库</em>
      </h2>
      <div class="slogan">畅享2596万首VIP下载歌曲</div>
      <div class="song">
        <div class="more">
        <span>
          <a href="#" class="fs-7">查看全部</a>
          <i class="f-ff1">> </i>
        </span>
        </div>
        <ul class="songlist">
          <li>
            <a href="#" class="cover">
              <img
                  src="../../assets/at1.jpg"alt="" class="album-img">
              <span class="mask"></span>
            </a>
          </li>
          <li>
            <a href="#" class="cover">
              <img
                  src="../../assets/at2.jpg"
                  alt="" class="album-img">
              <span class="mask"></span>
            </a>
          </li>
          <li>
            <a href="#" class="cover">
              <img
                  src="../../assets/at3.jpg" alt="" class="album-img">
              <span class="mask"></span>
            </a>
          </li>
          <li>
            <a href="#" class="cover">
              <img
                  src="../../assets/at4.jpg" alt="" class="album-img">
              <span class="mask"></span>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="n-faq">
      <a href="#" class="link f-tdu">付费会员服务协议</a>
      <a href="#" class="link f-tdu">自动续费服务协议</a>
      <span class="f-tdu link">常见问题解答</span>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "index",
  data(){
      return {
        isActive:1,
        money:0.88,
        less:12.12
  }
  },
  computed:{
    ...mapState('userInfo', ['userinfo'])
  }
}
</script>

<style scoped lang="less">
.member-body {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;

  .user-info {
    width: 980px;
    height: 200px;
    position: relative;

    .is-login {
      width: 980px;
      height: 200px;
      background: #f3f4f5 url(../../assets/bg.png) no-repeat 100% 100%;
      background-size: 50%;

      .check {
        top: 20px;
        right: 30px;
        color: #328ad4;
        position: absolute !important;

        .s-fc7 {
          color: #328ad4;
        }

        .down {
          margin-right: 20px;
        }

        .u-gt {
          position: relative;
          top: 1px;
          padding-left: 4px;
          font-weight: 700;
          color: #328ad4;
          font-family: simsun, \5b8b\4f53;
          pointer-events: none;
        }
      }

      .user-head {
        padding: 36px 70px;

        .avatar {
          position: relative;
          float: left;
          width: 120px;
          height: 120px;
          border: 1px solid #d5d5d5;
          padding: 3px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .user-content {
          height: 128px;
          margin-left: 148px;
          position: relative;

          .s-fc000 {
            font-size: 22px;
            height: 30px;
            max-width: 570px;
            font-weight: 400;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            font-family: Microsoft Yahei, Arial, Helvetica, sans-serif;
            color: #000;
          }

          .brand-tag {
            height: 20px;
            position: relative;
            margin-left: 10px;
            vertical-align: super;
          }

          .not-dredge {
            margin-top: 2px;
            color: #333;
            font-size: 12px;
          }

          .btn-gray {
            line-height: 38px;
            box-sizing: border-box;
            margin-left: 10px;
            background: none;
            border: 1px solid #bbb;
            color: #666;
            display: inline-block;
            margin-top: 36px;
            padding: 0 20px;
            height: 40px;
            border-radius: 2px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
            &:hover{
              background-color: #CCCCCC;
              color: #fff;
            }
          }

          .btn-send {
            margin-left: 0;
          }
        }
      }
    }
  }

  .scene-card {
    height: auto;
    overflow: hidden;
    .m-vipcashier-header {
      border-bottom: 1px solid #eee;
    }

    .m-vipcashier-tab {
      margin: 20px auto;

      .m-vipcashier-tab-list {
        border-bottom: 1px solid #eee;
        height: 36px;
        display: flex;

        li {
          margin: 0 55px;
          display: inline-block;
          font-size: 14px;
          color: #999;
          line-height: 20px;
          -webkit-box-flex: 1;
          -webkit-flex: 1 1;
          flex: 1 1;
          text-align: center;
        }

        .active {
          font-size: 14px;
          color: #333;
          position: relative;
          &:after {
            content: "";
            bottom: -4px;
            position: absolute;
            width: 100%;
            height: 3px;
            background-image: -webkit-linear-gradient(223deg,#ff8063,#fb5758);
            background-image: linear-gradient(-133deg,#ff8063,#fb5758);
            left: 50%;
            width: 42px;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
          }
        }

        .redvip {
          .list-icon {
            height: 12px;
            max-width: 100%;
            margin-left: 4px;
          }

        }

        .ordinary{
        .list-icon {
          height: 12px;
          max-width: 100%;
          margin-left: 4px;
        }
      }
    }
  }

  .m-vipcashier-product {
    margin-top: 30px;
    margin: 27px auto 20px;

    .tabb {
      .m-vipcashier-product-multicolumn {
        padding-bottom: 18px;

        .m-vipcashier-product-list {
          padding: 0 70px;
          display: flex;
          width: 980px;
          .none{
            border: none;
            cursor: auto;
            visibility: hidden;
          }
          .product-item {
            margin: 0 6px;
            -webkit-box-flex: 1;
            -webkit-flex: 1 1;
            flex: 1 1;
            border: 2px solid #eee;
            border-radius: 10px;
            height: 148px;
            position: relative;
            box-shadow: 0 2px 10px 0 rgb(0 0 0 / 8%);

            &:first-child {
              margin-left: 0;
            }

            .product-item-corner {
              position: absolute;
              left: -2px;
              background-image: linear-gradient(90deg, #ff5a4c, #ff1d12);
              border-radius: 10px 10px 10px 0;
              top: -8px;
              color: #fff;
              line-height: 26px;
              height: 26px;
              padding: 0 8px;
              max-width: 85%;
              box-sizing: border-box;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .product-item-month {
              text-align: center;
              width: 100%;
              padding-top: 29px;
              font-size: 17px;
              font-weight: 700;
            }

            .product-item-origin {
              color: #ff3a3a;
              text-align: center;
              vertical-align: text-bottom;
              line-height: 36px;

              .product-item-origin-label {
                font-size: 20px;
              }

              .product-item-origin-finalprice {
                font-size: 30px;
                font-weight: 500;
              }
            }

            .product-item-desc {
              font-size: 14px;
              color: #999;
              text-align: center;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              max-width: 80%;
              margin: 0 auto;

              .product-item-origin-price {
                color: #999;
                text-decoration: line-through;
                padding-left: 8px;
              }
            }

            .product-item-bottom {
              bottom: 0;
              right: 0;
              padding: 0 10px;
              height: 25px;
              line-height: 25px;
              text-align: center;
              background: #ffeded;
              border-radius: 0 0 6px 6px;
              color: #ff3a3a;
              position: absolute;
              left: 0;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .active {
            border-color: rgba(255, 58, 58, .75);
            .product-item-bottom{
              background: rgba(255,58,58,.75);
              color: #fff;
            }
          }
        }
      }
    }

    .m-vipcashier-product-desc {
      padding: 0 74px;
      font-size: 14px;
      color: #999;
      margin-top: 10px;
      height: 21px;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      .qicon {
        width: 14px;
        height: 15px;
        display: inline-block;
        margin-left: 5px;
        position: relative;
        top: 2px;
        color: #507daf;

        img {
          width: 100%;
        }
      }
    }
  }
.m-vipcashier-coupon{
  margin: 50px 0 20px 0;
  position: relative;
  &:before {
    content: "\9009\62E9\4F18\60E0\5238";
    display: block;
    font-size: 14px;
    color: #333;
    position: absolute;
    top: -30px;
    line-height: 20px;
    left: 70px;
  }
  .m-vipcashier-coupon-form{
    padding-left: 70px;
    height: 40px;
    .coupon-form-select{
      width: 300px;
      height: 100%;
      box-sizing: border-box;
      display: inline-block;
      position: relative;
      vertical-align: middle;
      color: #666;
      line-height: 28px;
      .rc-select-selection{
        height: 40px;
        line-height: 40px;
        border-radius: 6px;
        border: 1px solid #eee;
        cursor: pointer;
        position: relative;
        -webkit-user-select: none;
        box-sizing: border-box;
        display: block;
        background-color: #fff;
        outline: none;
        .rc-select-selection__rendered{
          height: 40px;
          line-height: 40px;
          position: relative;
          display: block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-left: 10px;
          .rc-select-selection__placeholder{
            position: absolute;
            top: 0;
            color: #aaa;
            display: block;
            user-select: none;
          }
          .rc-select-search{
            width: 100%;
            display: block;
            .rc-select-search__field__wrap{
              display: inline-block;
              width: 100%;
              .rc-select-search__field{
                border: none;
                font-size: 100%;
                background: transparent;
                outline: 0;
                width: 100%;
              }
              .rc-select-search__field__mirror{
                position: absolute;
                top: -999px;
                left: 0;
                white-space: pre;
              }
            }
          }
        }
        .rc-select-arrow{
          user-select: none;
          height: 26px;
          position: absolute;
          top: 7px;
          right: 1px;
          width: 20px;
          outline: none;
          .rc-select-arrow-icon{
            border-color: #999 transparent transparent;
            border-style: solid;
            border-width: 5px 4px 0;
            height: 0;
            width: 0;
            margin-left: -4px;
            margin-top: -2px;
            position: absolute;
            top: 50%;
            left: 50%;
          }
        }
      }
    }
    .coupon-form-exchange-link{
      position: absolute;
      top: -28px;
      left: 140px;
      display: inline-block;
      font-size: 12px;
      color: #3189d4;
      margin-left: 10px;
    }
  }
}
  .m-m-vipcashier-settle-warpper {

    .m-vipcashier-settle {
      padding: 20px 0;
      margin-top: 30px;
      .m-vipcashier-settle-line {

      }

      .m-vipcashier-settle-body {
        height: auto;
        overflow: hidden;
        border: 1px solid #eee;
        padding: 20px;
        margin-left: 70px;
        margin-right: 70px;
        font-size: 0;
        position: relative;
        &:before {
          content: "\652F\4ED8\65B9\5F0F";
          display: block;
          font-size: 14px;
          color: #333;
          position: absolute;
          top: -30px;
          line-height: 20px;
          left: 0;
        }
        .u-settle-qrcode {
          width: 100px;
          height: 100px;
          float: left;
          position: relative;
          top: 0!important;
          left: 0!important;
          img {
            width: 100%;
            display: block;
          }
        }

        .u-settle-detail {
          font-size: 14px;
          vertical-align: top;
          height: 100px;
          margin-left: 20px;
          float: left;
          min-width: 0;
          .detail-title {
            font-size: 14px;
            line-height: 14px;
            color: #333;
          }

          .detail-icons {
            margin-top: 10px;
            height: 18px;

            img {
              display: inline-block;
              height: 100%;
              margin-right: 10px;
            }
          }

          .detail-body {
            margin-top: 18px;
            color: #333;
            .detail-origin-price {
              font-size: 44px;
              line-height: 44px;
            }

            .detail-cost-price {
              margin-left: 20px;
              font-size: 14px;
              .detail-cost-price-count {
                color: #fa4f4d;
              }
            }
          }
        }
      }
    }
  }
}

.m-privilege {
  width: 840px;
  height: auto;
  overflow: hidden;
  margin: 60px auto 0;
  .title {
    height: 30px;
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    em {
      display: inline-block;
      position: relative;
      height: 100%;
      background: #fff;
      line-height: 22px;
      &:before {
        left: -50px;
      }
      &:before,&:before {
        position: absolute;
        content: "";
        top: 0;
        height: 12px;
        width: 36px;
        border-bottom: 1px solid #e6e6e6;
      }
    }
  }

  .m-rights {
    width: 811px;
    margin: 0 auto;
    line-height: 20px;
    li {
      float: left;
      width: 140px;
      margin: 40px 10px 0;
      text-align: center;
      img {
        display: block;
        width: 60px;
        height: 60px;
        margin: 0 auto 15px;
      }

      .icon-name {
        font-size: 14px;
      }
    }
  }
}

.n-special {
  width: 840px;
  margin: 60px auto 0;
  .title {
    height: 30px;
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    em {
      display: inline-block;
      position: relative;
      height: 100%;
      background: #fff;
      line-height: 22px;
      &:before {
        left: -50px;
      }
      &:before,&:before {
        position: absolute;
        content: "";
        top: 0;
        height: 12px;
        width: 36px;
        border-bottom: 1px solid #e6e6e6;
      }
    }
  }

  .slogan {
    margin-top: 10px;
    text-align: center;
    font-size: 32px;
    line-height: 45px;
  }

  .song {
    margin-top: 10px;
    .more {
      height: 24px;
      padding-right: 26px;
      line-height: 24px;
      font-weight: 400;
      text-align: center;
      span {
        .fs-7 {
          color: #328ad4;
        }

        .f-ff1 {
          color: #328ad4;
          padding-left: 4px;
          font-family: simsun,\5b8b\4f53;
        }
      }
    }

    .songlist {
      height: auto;
      overflow: hidden;
      margin: 8px 0 0 -26px;
      li {
        float: left;
        width: 190px;
        height: 160px;
        margin-left: 26px;
        .cover {
          display: block;
          width: 160px;
          height: 160px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
            display: block;
          }

          .mask {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 191px;
            height: 160px;
            background: url(../../assets/bg1png.png) no-repeat;
          }
        }
      }
    }
  }
}

.n-faq {
  padding: 80px 0 40px;
  text-align: center;

  .link {
    margin-right: 14px;
    cursor: pointer;
    color: #999;
  }

  .f-tdu {
    text-decoration: underline;
  }
}

}
</style>